{% if is_ajax %}
 <div class="user_manage" data-tab-id="user_manage">
 <div class="user_manage_son" data-tab-id="user_manage_son">
    {% load auth_tags %}
    {% load static %}
    <style>
      [data-tab-id="user_manage"] .dropdown-menu.w-auto {
        min-width: auto;      /* 取消默认最小宽度 */
        max-width: 400px;     /* 设置最大宽度防止溢出 */
       }
      [data-tab-id="user_manage"] .min-w-0 {
        min-width: 0 !important;  /* 覆盖Bootstrap默认值 */
      }

     /* 把表格固定在离顶部45px处 */
    [data-tab-id="user_manage"] .fixed-area {
        position: absolute;
        top: 55px;
        {#bottom: 10px;#}
        left: 0;
        right: 0;
        {#overflow-y: auto; /* 支持内部滚动 */#}
    }
    /* 表格整体调整 */
    [data-tab-id="user_manage"] .table.table-hover tbody td,
    [data-tab-id="user_manage"] .table.table-hover thead th {
      padding-top: 6px;
      padding-bottom: 6px;
      vertical-align: middle;
      line-height: 1.3; /* 根据字体实际大小调整 */
    }

    /* 徽章垂直居中 */
    [data-tab-id="user_manage"] .table .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 60px;
      padding: 0.25em 0.4em;
      margin: 0 2px;
    }

    /* 下拉按钮对齐 */
    [data-tab-id="user_manage"] .table .dropdown-toggle {
      vertical-align: middle;
      padding: 2px 8px;
      transform: scale(0.9);
    }

    /* 确保多行文本居中 */
    [data-tab-id="user_manage"] .table td {
      white-space: nowrap; /* 防止文字换行破坏对齐 */
    }

    /* 增强表格行悬浮效果 */
    [data-tab-id="user_manage"] .table.table-hover tbody tr {
      transition: all 0.2s ease; /* 添加过渡动画 */
      cursor: pointer;          /* 光标变为手指形状 */
    }

    /* 更明显的悬浮背景色 */
    [data-tab-id="user_manage"] .table.table-hover tbody tr:hover {
      background-color: #e3f2fd!important;    /* 蓝色系悬浮效果 */
      box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* 添加投影 */
    }


    /* 自定义样式: 重置密码模态框 */
    [data-tab-id="user_manage"] .modal-content-dry {
      background-color: #2d2d2d;
      border: 1px solid #444;
    }

    [data-tab-id="user_manage"] .nav-tabs-dry .nav-link-dry {
      border: none;
      border-bottom: 2px solid transparent;
    }

    [data-tab-id="user_manage"] .nav-tabs-dry .nav-link-dry.active {
      background: transparent !important;
      border-bottom: 2px solid #0d6efd;
      color: #0d6efd !important;
    }

    [data-tab-id="user_manage"] .bg-gray-800 {
      background-color: #1a1a1a;
    }

    [data-tab-id="user_manage"] .form-control-dry {
      background-color: #333;
      color: white;
      border: 1px solid #444;
    }

    [data-tab-id="user_manage"] .form-control-dry:focus {
      background-color: #444;
      color: white;
      border-color: #0d6efd;
    }


    /* 分页按钮样式优化 */
    [data-tab-id="user_manage"] .position-relative {
        margin-right: 20px;
        bottom: 10px;
        justify-content: end;
    }

    [data-tab-id="user_manage"] .current-total {
        color: black;
    }

    [data-tab-id="user_manage"] .pagination-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
    }

    /* 禁用按钮样式 */
    [data-tab-id="user_manage"] .pagination-btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* 跳转输入框样式 */
    [data-tab-id="user_manage"] .input-group.input-group-sm {
        width: 120px;
    }

    [data-tab-id="user_manage"] #page-jump-input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        height: 36px;
    }

    [data-tab-id="user_manage"] #page-jump-btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        height: 36px;
        padding: 0 12px;
    }

    /* 响应式调整 */
    [data-tab-id="user_manage"] @media (max-width: 768px) {
        .d-flex.justify-content-end {
            flex-wrap: wrap;
            justify-content: center !important;
        }

        .me-3, .btn-group, .input-group {
            margin-bottom: 10px;
        }
    }

    </style>

<!-- 在模板中安全注入数据 -->
{{ ownID|json_script:"ownIDData" }}      <!-- 操作员id -->
{{ ownUser|json_script:"ownUserData" }}      <!-- 操作员id -->
{{ ownUser_is_superuser|json_script:"ownUser_is_superuserData" }}      <!-- 操作员id -->
{{ ownUser_permissions|json_script:"ownUser_permissionsData" }}      <!-- 操作员所有权限 -->
{{ users|json_script:"usersData" }}      <!-- 所有用户 -->
{{ groups|json_script:"groupsData" }}    <!-- 所有组 -->


<div
    class="container-fluid py-1 bg-grep text-white fixed-area"
    style="width: 85vw; margin: 0 auto;"
    data-module-root="user-manage">  <!-- 最外层 -->
    <!-- User Table -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive-md">
                <table class="table table-hover table-striped">
                    <thead class="table-light">
                    <tr>
                        <th class="col-md-2">用户名</th>
                        <th class="col-md-2">手机号</th>
                        <th class="col-md-2">邮箱</th>
                        <th class="col-md-1">员工</th>
                        <th class="col-md-1">状态</th>
                        <th class="col-md-1">角色权限</th>
                        <th class="col-md-2">最后登录</th>
                        <th class="col-md-1">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for user in users %}
                        <tr data-id={{ user.id }}>
                            <td>{{ user.username }}</td>
                            <td>{{ user.phone }}</td>
                            <td>{{ user.email }}</td>

                            <td>  <!-- 员工 -->
                                <span class="badge bg-{% if user.is_staff %}success{% else %}danger{% endif %}">
                                    {% if user.is_staff %}是{% else %}否{% endif %}
                                </span>
                            </td>

                            <td>  <!-- 状态 -->
                                <span class="badge bg-{% if user.is_active %}success{% else %}danger{% endif %}">
                                    {% if user.is_active %}已激活{% else %}未激活{% endif %}
                                </span>
                            </td>

                            <td>  <!-- 权限:用的组名 -->
                                {% with user_groups=user.groups group_count=user.groups|length %}
                                    <div id="groups-multi">
                                        {% if group_count > 1 %}
                                            <span class="text text-sm dropdown-toggle"
                                                    type="text"
                                                    data-bs-toggle="dropdown"
                                                    aria-expanded="false"
                                                    style="padding: 0;"
                                                    data-group-ids="{% for g in user_groups %}{{ g.0 }}{% if not forloop.last %},{% endif %}{% endfor %}"> <!-- 添加组ID列表 -->
                                              {{ user_groups.0.1}}
                                            </span>
                                            <ul class="dropdown-menu w-auto min-w-0">
                                              {% for group in user_groups %}
                                                <li>
                                                    <span class="dropdown-item-text text-nowrap"
                                                          data-group-id="{{ group.0 }}">{{ group.1 }}
                                                    </span>
                                                </li>
                                              {% endfor %}
                                            </ul>

                                        {% else %}
                                               <!-- 直接显示模式 -->
                                              {% for group in user_groups %}
                                                  <span class="group-item text"
                                                    data-group-ids="{{ group.0 }}"> <!-- 单组ID -->
                                                    {{ group.1 }}{% if not forloop.last %}, {% endif %}
                                                  </span>
                                              {% empty %}
                                                <span class="text text-muted">未授权</span>
                                              {% endfor %}
                                        {% endif %}
                                    </div>
                                {% endwith %}
                            </td>

                            <td>{{ user.last_login|date:"Y-m-d H:i" }}</td>

                            <td>
                                <div class="btn-group">
                                    {% check_user_groups "超级权限" as what_role %}
                                    {% if what_role or user.id == ownID %}
                                    <button class="btn btn-sm btn-outline-primary edit-btn"
                                            title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                        <button class="btn btn-sm btn-outline-danger delete-btn"
                                                title="删除"
                                                data-userid="{{ user.id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        <button type="button"
                                                class="btn btn-sm btn-outline-warning reset-pwd-btn"
                                                title="重置密码"
                                                data-userid="{{ user.id }}"
                                                >
                                            <i class="fas fa-key"></i>
                                        </button>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>

              <!-- 底部操作栏: 搜索, 内外部人员, 分页, 新增用户 -->
              {% check_user_groups "超级权限" as what_role %}
              {% if user.is_superuser or what_role %}
                <div class="d-flex justify-content-between align-items-center flex-nowrap w-100 py-0 my-0">
                  <!-- 左侧元素组 -->
                  <div class="d-flex flex-nowrap align-items-center">
                      <!-- 搜索框 -->
                      <div class="input-group input-group-sm me-2  position-relative" style="min-width: 300px;">
                          <input type="search"
                                 class="form-control border-start-1"
                                 placeholder="搜索用户..."
                                 data-search-type="user"
                                 autocomplete="off"
                                 id="userSearch">
                          <button class="btn btn-primary btn-sm d-flex align-items-center justify-content-center fw-medium px-2"
                                  type="button"
                                  id="searchButton">
                            <i class="fas fa-search me-1"></i>
                            <span class="d-none d-md-inline">搜索</span>
                          </button>
                    </div>
                      <!-- 下拉选择框 -->
                      {% if '可以查看外部客户' in ownUser_permissions %}
                        <div class="form-select-container me-2 position-relative">
                            <select class="form-select form-select-sm" id="userTypeSelect">
                                <option value="internal" selected>内部用户</option>
                                <option value="external">外部客户</option>
                            </select>
                        </div>
                      {% endif %}
                  </div>

                   <!-- 中间:分页控件 -->
                   {% include 'account/partials/paging.html' %}

                  <!-- 右侧:添加用户按钮 -->
                  {% if '新增用户' in ownUser_permissions %}
                      <div class="d-flex flex-nowrap align-items-center mt-1 position-relative">
                        <button class="btn btn-primary btn-sm addNewRow">
                          <i class="fas fa-plus me-1"></i>添加用户
                        </button>
                      </div>
                  {% endif %}

                </div>
              {% endif %}

            </div>
        </div>
    </div>
</div>

<!-- 删除模态框 -->
<div class="modal fade" id="deleteConfirmModal">
    <div class="modal-dialog modal-sm"> <!-- 添加 modal-sm 类缩小整体尺寸 -->
        <div class="modal-content" style="max-width: 300px; border: 2px solid #ffb3d1; border-radius: 8px; overflow: hidden">
            <!-- 内容 -->
            <div class="modal-body py-3 pb-1" style="background: #ffeff5; color: #c66988; font-size: 15px; padding: 0 2px 0 8px">
                <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                确定要删除该用户吗？此操作不可逆！
            </div>
            <!-- 底部按钮 -->
            <div class="modal-footer py-1" style="background: #ffeff5; border-color: #ffeff5">
                <button type="button"
                        class="btn btn-sm px-3"
                        style="background: #ffffff; color: #d81b60; border: 1px solid #ffb3d1"
                        data-bs-dismiss="modal">
                    取消
                </button>
                <button type="button"
                        class="btn btn-sm px-3"
                        id="confirmDelete"
                        style="background: #ff5c8d; color: white; border: none">
                    <i class="fas fa-trash-alt me-1"></i>
                    确认删除
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 提示小模态框 -->
{#<div class="modal fade" id="warningModal" tabindex="-1" data-bs-backdrop="static">#}
{#  <div class="modal-dialog modal-sm">#}
{#    <div class="modal-content" style="background-color: #ffe6f0; border: 2px solid #ff99c2;">#}
{#      <div class="modal-body text-center py-1">#}
{#        <p class="mt-1 mb-1 text-dark" style="font-size: 20px;" id="dynamicMessage">#}
{#          需要提示的信息:message变量#}
{#        </p>#}
{#      </div>#}
{#    </div>#}
{#  </div>#}
{#</div>#}

<!-- 重置密码模态框 -->
<div class="modal fade" id="passwordResetModal" tabindex="-1" aria-labelledby="passwordResetLabel">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content bg-dark text-light modal-content-dry"> <!-- 添加深色背景 -->
      <div class="modal-header border-secondary"> <!-- 调整边框颜色 -->
        <!-- Tab导航 -->
        <ul class="nav nav-tabs border-0 nav-tabs-dry" id="authTabs">
          <li class="nav-item">
            <button class="nav-link active text-light bg-transparent nav-link-dry"
                    data-bs-toggle="tab"
                    data-bs-target="#smsAuthTab">短信验证</button>
          </li>
          <li class="nav-item">
            <button class="nav-link text-light bg-transparent nav-link-dry"
                    data-bs-toggle="tab"
                    data-bs-target="#passwordAuthTab">密码验证</button>
          </li>
        </ul>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body bg-gray-800"> <!-- 内容区背景 -->
        <div class="tab-content">
          <!-- 短信验证 Tab -->
          <div class="tab-pane fade show active" id="smsAuthTab">
            <form id="smsAuthForm">
              {% csrf_token %}
              <div class="mb-3">
                <label class="form-label">验证手机号</label>
                <input type="tel"
                       class="form-control bg-dark text-light border-secondary form-control-dry"
                       id="phone"
                       pattern="\d{11}"
                       autocomplete="off"
                       required>
                <small class="text-muted">仅支持本人或管理员手机号</small>
              </div>
              <div class="mb-3 input-group">
                <input type="text"
                       class="form-control bg-dark text-light border-secondary form-control-dry"
                       id="smsCode"
                       autocomplete="off"
                       placeholder="验证码"
                       required>
                <button type="button"
                        class="btn btn-outline-secondary sendSmsCode">获取验证码</button>
              </div>
              <div class="mb-3">
                <label class="form-label">新密码</label>
                <div class="input-group mb-2">
                <input type="password"
                   class="form-control bg-dark text-light border-secondary form-control-dry"
                   id="smsNewPassword"
                   name="current-sms-new-password"
                   autocomplete="current-sms-new-password"
{#                   aria-describedby="passwordHelp"#}
                   placeholder="请输入新密码"
                   required>
{#                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('smsNewPassword', this)">#}
                <button class="btn btn-outline-secondary togglePassword" type="button" data-field-id="smsNewPassword">
                    <i class="fas fa-eye oldPassword"></i>
                </button>
                </div>
                <div class="input-group">
                <input type="password"
                   class="form-control bg-dark text-light border-secondary form-control-dry"
                   id="smsConfirmPassword"
                   name="current-sms-confirm-password"
                   autocomplete="current-sms-confirm-password"
                   aria-describedby="passwordHelp"
                   placeholder="请再次输入新密码"
                   required>
{#                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('smsConfirmPassword', this)">#}
                  <button class="btn btn-outline-secondary togglePassword" type="button" data-field-id="smsConfirmPassword">
                    <i class="fas fa-eye oldPassword"></i>
                </button>
                </div>
                <small id="passwordHelp" class="form-text text-muted">新密码必须6位以上</small>
            </div>
              <button type="submit" class="btn btn-primary w-100">验证</button>
            </form>
          </div>

          <!-- 密码验证 Tab -->
          <div class="tab-pane fade" id="passwordAuthTab">
            <form id="passwordForm">
              {% csrf_token %}
              <input type="text"
                     name="username"
                     autocomplete="username"
                     style="display: none;"
                     value="{{ request.user.username }}"
                     inert>
              <div class="mb-4">

                <label class="form-label">原密码</label>
                <div class="input-group">
                <input type="password"
                       class="form-control bg-dark text-light border-secondary form-control-dry"
                       id="oldPassword"
                       name="current-old-password"
                       autocomplete="current-old-password"
                       required>
{#                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('oldPassword', this)">#}
                <button class="btn btn-outline-secondary togglePassword" type="button" data-field-id="oldPassword">
                    <i class="fas fa-eye oldPassword"></i>
                </button>
                </div>
                <small class="text-muted">需通过原密码验证身份</small>
              </div>
              <div class="mb-4">
                <label class="form-label">新密码</label>
                <div class="input-group mb-2">
                <input type="password"
                   class="form-control bg-dark text-light border-secondary form-control-dry"
                   id="newPassword"
                   name="current-new-password"
                   autocomplete="current-new-password"
                   aria-describedby="passwordHelp"
                   placeholder="请输入新密码"
                   required>
{#                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('newPassword', this)">#}
                <button class="btn btn-outline-secondary togglePassword" type="button" data-field-id="newPassword">
                    <i class="fas fa-eye oldPassword"></i>
                </button>
                </div>
                <div class="input-group">
                <input type="password"
                   class="form-control bg-dark text-light border-secondary form-control-dry"
                   id="confirmPassword"
                   name="current-confirm-password"
                   autocomplete="current-confirm-password"
                   aria-describedby="passwordHelp"
                   placeholder="请再次输入新密码"
                   required>
{#                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('confirmPassword', this)">#}
                <button class="btn btn-outline-secondary togglePassword" type="button" data-field-id="confirmPassword">
                    <i class="fas fa-eye oldPassword"></i>
                </button>
                </div>
                <small id="passwordHelp" class="form-text text-muted">新密码必须6位以上</small>
            </div>
              <button type="submit" class="btn btn-primary w-100 mt-3 mb-3">确认修改</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 引入显示小模态框js -->
{#<script src="{% static 'js/prompt_modal.js' %}"></script>#}
</div>
</div>
{% endif %}
